﻿import QtQuick
import QtQuick.Controls.Basic

Switch {
    id: control
    // text: qsTr("Switch")
    property real custom_width: 64

    indicator: Rectangle {
        id: rect_outside
        implicitWidth: custom_width
        implicitHeight: 26
        x: control.leftPadding
        y: parent.height / 2 - height / 2
        radius: 13
        color: control.checked ? "#dfffef" : "#E0E0E0"
        border.color:  control.checked ? "#86dbce" : "#E0E0E0" //"#cccccc"
        state: "closed"

        Rectangle {
            id: rect_inside
            property real wh_size: 14
            anchors.verticalCenter: parent.verticalCenter
            // x: control.checked ? parent.width - width : 0
            width: wh_size
            height: wh_size
            radius: 13
            color: control.checked ? "#ffffff" : "#F2F2F2"
            // color: control.down ? "#cccccc" : "#ffffff"
            border.color: "#f2f2f2"
            // border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"

            states: [
                State {
                    name: "big"
                    PropertyChanges {
                        target: rect_inside
                        wh_size: 22
                    }
                },
                State {
                    name: "small"
                    PropertyChanges {
                        target: rect_inside
                        wh_size: 14
                    }
                }
            ]
            transitions: [
                Transition {
                    PropertyAnimation {
                        property: "wh_size"
                        duration: 100
                    }
                },
                Transition {
                    PropertyAnimation {
                        target: rect_inside
                        property: "wh_size"
                        duration: 100
                    }
                }
            ]
        }

        states: [
            State {
                name: "opened"
                AnchorChanges {
                    target: rect_inside
                    anchors.right: rect_outside.right
                }
            },
            State {
                name: "closed"
                AnchorChanges {
                    target: rect_inside
                    anchors.left: rect_outside.left
                }
            }
        ]

        transitions: [
            Transition {
                AnchorAnimation { duration: 100 }
            },
            Transition {
                AnchorAnimation { duration: 100 }
            }
        ]

    }

    onCheckedChanged: {
        // console.log("onCheckedChanged:", checked)
        if (checked) {
            rect_outside.state = "opened"
        } else {
            rect_outside.state = "closed"
        }
    }
    onDownChanged: {
        // console.log("onDownChanged:", down)
        if (down) {
            rect_inside.state = "big"
        } else {
            rect_inside.state = "small"
        }
    }

    // onDownChanged: {
    //     // console.log("onDownChanged down:",down)
    //     animation_magnify_rect_inside.start()
    // }

    // define state


    // define animation


    // PropertyAnimation {
    //     id: animation_changing
    //     target: rect_inside
    //     property: "x"
    //     from: control.checked ? rect_outside.width - rect_inside.width : 0
    //     to: control.checked ? 0 : rect_outside.width - rect_inside.width
    //     duration: 100
    // }

    // contentItem: Text {
    //     text: control.text
    //     font: control.font
    //     opacity: enabled ? 1.0 : 0.3
    //     color: control.down ? "#17a81a" : "#21be2b"
    //     verticalAlignment: Text.AlignVCenter
    //     leftPadding: control.indicator.width + control.spacing
    // }
}
